---
layout: default
title: Furatto - Navigation Bar
---

<h1>Navigation Bar</h1>
<p class="main-motto">Furatto provides a beautiful and extendable top navigation bar. It collapses on mobile views, providing a sliding down kind menu.</p>

<hr />

<h3>Building the markup</h3>
<p>The navigation bar is a bit complex piece of HTML, but full with goodies. It has support for many elements such as buttons, links, and even dropdown menus for you to play around. It is highgly customizable, and we will add more features to it in the near future.</p>

<nav class="navigation-bar">
   <ul class="brand-section">
     <li class="brand-name">
      <a href="/" class="menu-trigger" id="trigger">Furatto</a>
     </li>
     <li class="menu-toggle">
      <a href="#">Menu</a>
     </li>
   </ul>
   <ul class="pull-right">
     <li class="divider"></li>
     <li><a href="#">Add-ons</a></li>
     <li class="divider"></li>
     <li><a href="/docs">Docs</a></li>
     <li class="divider"></li>
     <li><a href="#" class="button three-d">Get Started <i class="fa fa-chevron-circle-right"></i></a></li>
   </ul>
</nav>

<pre data-language="html">
   <code>
&lt;nav class=&quot;navigation-bar&quot;&gt;<br/>   &lt;ul class=&quot;brand-section&quot;&gt;<br/>     &lt;li class=&quot;brand-name&quot;&gt;<br/>      &lt;a href=&quot;/&quot; class=&quot;menu-trigger&quot; id=&quot;trigger&quot;&gt;Furatto&lt;/a&gt;<br/>     &lt;/li&gt;<br/>     &lt;li class=&quot;menu-toggle&quot;&gt;<br/>      &lt;a href=&quot;#&quot;&gt;Menu&lt;/a&gt;<br/>     &lt;/li&gt;<br/>   &lt;/ul&gt;<br/>   &lt;ul class=&quot;pull-right&quot;&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Add-ons&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;/docs&quot;&gt;Docs&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;button three-d&quot;&gt;Get Started &lt;i class=&quot;fa fa-chevron-circle-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br/>   &lt;/ul&gt;<br/>&lt;/nav&gt;
   </code>
</pre>

<hr />

<h3>Navigation bar position</h3>

<p>The navigation bar is build with a <span class="code">nav</span> or <span class="code">ul</span> element. It will cover the full browser width. By default it will stick on the top of the browser, and by just appending the <span class="code">fixed</span> class name to the <span class="code">navigation-bar</span> it follow as you scroll down.</p>

<h5>Fixed navigation</h5>

<p>For fixed top navbar you just need to add a <span class="code">padding-top</span> to the body which should be equal or bigger thant the height of your navigation bar element. The default value of the navigation bar is <span class="code">45px</span>.</p>

<pre data-language="html">
   <code>
&lt;nav class="navigation-bar fixed"&gt;

&lt;/nav&gt;
   </code>
</pre>

<hr />

<h3>Navigation bar components</h3>

<p>We know adding more than just links to the navigation bar is important, that's why we added support to add different elements on it, such as <span class="code">buttons</span>, <span class="code">dividers</span> and much more...</p>

<nav class="navigation-bar">
   <ul class="brand-section">
     <li class="brand-name">
      <a href="/" class="menu-trigger" id="trigger">Furatto</a>
     </li>
     <li class="menu-toggle">
      <a href="#">Menu</a>
     </li>
   </ul>
   <ul class="pull-right">
     <li class="divider"></li>
     <li><a href="#">Add-ons</a></li>
     <li class="divider"></li>
     <li><a href="/docs">Docs</a></li>
     <li class="divider"></li>
     <li><a href="#" class="button three-d">Get Started <i class="fa fa-chevron-circle-right"></i></a></li>
   </ul>
</nav>
<br />
<div class="row">
   <div class="col-6">
    <h5 class="code">Links</h5>  
    <p>Adding links to the navbar is fairly easy, you just have to wrap them inside a <span class="code">ul</span> element and you're good to go.</p>
    <pre>
      <code>
&lt;nav class=&quot;navigation-bar&quot;&gt;<br/>   &lt;ul class=&quot;pull-right&quot;&gt;<br/>     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Add-ons&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;/docs&quot;&gt;Docs&lt;/a&gt;&lt;/li&gt;<br/>   &lt;/ul&gt;<br/>&lt;/nav&gt;
      </code>
    </pre>
   </div>
   <div class="col-6">
    <h5 class="code">Dividers</h5>  
    <p>To add dividers between links or elements on a <span class="code">ul</span> element, just add a <span class="code">divider</span> to a list element.</p>
    <pre>
      <code>
&lt;nav class=&quot;navigation-bar&quot;&gt;<br/>   &lt;ul class=&quot;pull-right&quot;&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Add-ons&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;/docs&quot;&gt;Docs&lt;/a&gt;&lt;/li&gt;<br/>   &lt;/ul&gt;<br/>&lt;/nav&gt;
      </code>
    </pre>
   </div>
</div>

<div class="row">
   <div class="col-6">
    <h5 class="code">Buttons</h5>  
    <p>You can add buttons to the navigation bar by just adding the <span class="code">button</span> class name to the anchor element. You can also add the class modifiers that Furatto offers by default.</p>
    <pre>
      <code>
&lt;nav class=&quot;navigation-bar&quot;&gt;<br/>   &lt;ul class=&quot;pull-right&quot;&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Add-ons&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;/docs&quot;&gt;Docs&lt;/a&gt;&lt;/li&gt;<br/>     &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>     &lt;li&gt;&lt;a href=&quot;/docs&quot; class=&quot;button three-d&quot;&gt;Get Started &lt;i class=&quot;fa fa-chevron-circle-right&quot;&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;<br/>   &lt;/ul&gt;<br/>&lt;/nav&gt;
      </code>
    </pre>
   </div>
   <div class="col-6">
    <h5 class="code">Search bar</h5>  
    <p>To add a search bar to the navigation bar, is fairly easy, just
    add a <span class="code">.with-form</span> class name to a list item
    and inside it add the form, just as shown below:</p>
    <pre>
      <code>
&lt;ul&gt;<br/>  &lt;li class=&quot;with-form&quot;&gt;<br/>    &lt;form action=&quot;&quot; method=&quot;get&quot; accept-charset=&quot;utf-8&quot;&gt;<br/>      &lt;input type=&quot;search&quot; name=&quot;&quot; id=&quot;&quot; value=&quot;&quot; /&gt;<br/>      &lt;input type=&quot;submit&quot; name=&quot;&quot; id=&quot;&quot; value=&quot;Search&quot; class=&quot;button pill&quot; /&gt;<br/>    &lt;/form&gt;<br/>  &lt;/li&gt;<br/>&lt;/ul&gt;
      </code>
    </pre>
   </div>
</div>

<div class="row">
   <div class="col-6">
    <h5 class="code">Dropdowns</h5>  
    <p>It is very easy to group menu items into dropdown menus on the navbar. You just need to add the <span class="code">with-dropdown</span> class to a list item, and inside of it add another <span class="code">ul</span> element.</p>
    <pre>
      <code>
&lt;nav class=&quot;navigation-bar&quot;&gt;<br/>   &lt;ul&gt;<br/>    &lt;li class=&quot;with-dropdown&quot;&gt;<br/>      &lt;a href=&quot;#&quot;&gt;Settings &lt;i class=&quot;icon-arrow-down&quot;&gt;&lt;/i&gt;&lt;/a&gt;<br/>      &lt;ul class=&quot;dropdown&quot;&gt;<br/>         &lt;li class=&quot;dropdown-header&quot;&gt;A header&lt;/li&gt;<br/>         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Abraham Kuri Vargas&lt;/a&gt;&lt;/li&gt;<br/>         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;A really long text to test the dropdown&lt;/a&gt;&lt;/li&gt;<br/>         &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-success&quot;&gt;Edit profile&lt;/a&gt;&lt;/li&gt;<br/>         &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-danger&quot;&gt;Edit profile&lt;/a&gt;&lt;/li&gt;<br/>         &lt;li class=&quot;divider&quot;&gt;&lt;/li&gt;<br/>         &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Sign out&lt;/a&gt;&lt;/li&gt;<br/>      &lt;/ul&gt;<br/>    &lt;/li&gt;<br/>   &lt;/ul&gt;<br/>&lt;/nav&gt;
      </code>
    </pre>
   </div>
</div>

<blockquote>
  <h4>Extra support</h4>
  <p>We don't currently support forms on the navbar, or on the dropdowns, but we will, wait for them. For updates follow us at <a href="https://twitter.com/furattoicalia">@furattoicalia</a>.</p>
</blockquote>

<hr />

<h3>Available sass variables</h3>

<p>It is very common to change the default values for the navigation bar, you can achieve almost everything you want on it by just changing the our sass variables.</p>

<pre data-language="scss">
   <code>
//Navigation general settings
$navigation-bar-height: 45px !default;
$navigation-bar-background: #191818 !default;
$navigation-margin-bottom: 10px !default;
$navigation-bar-color: #FFF !default;
$navigation-bar-font-weight: 300 !default;
$navigation-font-size: px-to-rems(13) !default;
$navigation-fixed-z-index: 1030 !default;
$navigation-bar-border-bottom: transparent !default;

//Brand section
$navigation-bar-brand-section-font-size: px-to-rems(18) !default;
$navigation-bar-brand-section-font-weight: 400 !default;

//Navigation links settings
$navigation-bar-link-color: #FFF !default;
$navigation-bar-link-hover-color: #999 !default;
$navigation-bar-link-hover-decoration: none !default;

//Buttons settings
$navigation-bar-button-font-size: $navigation-font-size !default;
$navigation-bar-button-height: 35px !default;
$navigation-bar-button-margin-left: px-to-rems(8) !default;
$navigation-bar-button-margin-right: px-to-rems(8) !default;
$navigation-bar-menu-color: #FFF !default;

//Icons settings
$navigation-bar-icon-margin-right: 5px !default;

//Text settings
$navigation-bar-text-color: #CCC !default;

//Active items
$navigation-bar-active-color: #FFF !default;
$navigation-bar-active-hover-color: darken($navigation-bar-active-color, 5%) !default;

//Menu toggle
$navigation-bar-menu-toggle-text-transform: uppercase !default;

//Dropdown
$navigation-bar-arrow-color: $navigation-bar-link-color !default;
$navigation-bar-arrow-hover-color: $navigation-bar-link-hover-color !default;
$navigation-bar-dropdown-z-index: $navigation-fixed-z-index + 10 !default;
$navigation-bar-dropdown-header-text-transform: uppercase !default;
$navigation-bar-dropdown-header-padding: px-to-rems(9) px-to-rems(17) px-to-rems(2) !default;
$navigation-bar-dropdown-header-color: #777 !default;
$navigation-bar-dropdown-header-font-weight: bold !default;
$navigation-bar-dropdown-header-font-size: px-to-rems(8) !default;
$navigation-bar-dropdown-divider-height: px-to-rems(1) !default; 
$navigation-bar-dropdown-anchor-height: 45px !default;
$navigation-bar-dropdown-anchor-line-height: $navigation-bar-dropdown-anchor-height !default;
$navigation-bar-dropdown-right-position: 0px !default;


//Media
$media-collapse-width: 768px !default;
$navigation-bar-collapse-query: "#{$media-display} and (max-width: #{$media-collapse-width})" !default;
$navigation-bar-uncollapse-query: "#{$media-display} and (min-width: #{$media-collapse-width})" !default;
   </code>
</pre>

<hr />

<h3>Using the javascript</h3>

<blockquote>
  <h4>Using navigation bar plugin</h4>  
  <p>Just add the <span class="code">furatto.navigation-bar.js</span> file or the <span class="code">furatto.js</span></p>
</blockquote>

<p>An example is provided below:</p>
<pre>
  <code>
&lt;script type=&quot;text/javascript&quot; charset=&quot;utf-8&quot; src=&quot;../dist/js/furatto.min.js&quot;&gt;&lt;/script&gt; 
  </code>
</pre>
